<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      class="cust-dialog"
      :show-close="false"
      :modal="index == 1 ? false : true"
      :align-center="true"
    >
      <div class="cont" v-if="index == 1">
        <el-icon v-if="type == 'success'">
          <CircleCheck />
        </el-icon>
        <el-icon v-if="type == 'error'">
          <CircleClose />
        </el-icon>
        <div class="text">{{ content }}</div>
      </div>
      <div class="modal" v-if="index == 2">
        <div class="text">{{ content }}</div>
        <div class="btns">
          <div class="btn btn1" v-if="cancelBtn" @click="handleCancel">
            取消
          </div>
          <div class="btn btn2" @click="hanldeSuccess">确定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElDialog, ElIcon } from "element-plus";

import { CircleCheck, CircleClose } from "@element-plus/icons-vue";
const dialogFormVisible = ref<boolean>(false);
const type = ref<string>("");
const content = ref<string>("");
const index = ref(0);
const cancelBtn = ref<boolean>();
function openToast({
  duration = 2000,
  text,
  icon,
}: {
  duration?: number;
  text: string;
  icon?: string;
}) {
  index.value = 1;
  dialogFormVisible.value = true;
  if (icon) {
    type.value = icon;
  }
  content.value = text;

  setTimeout(() => {
    dialogFormVisible.value = false;
  }, duration);
}
let funCancel, funSuccess;
function openModal({
  text,
  success,
  cancel,
  isCancel = true,
}: {
  text?: string;
  success?: object;
  cancel?: object;
  isCancel?: boolean;
}) {
  cancelBtn.value = isCancel;
  index.value = 2;
  content.value = text;
  funCancel = cancel;
  funSuccess = success;
  dialogFormVisible.value = true;
}
const handleCancel = () => {
  dialogFormVisible.value = false;
  if (funCancel) {
    funCancel();
  }
};
const hanldeSuccess = () => {
  dialogFormVisible.value = false;
  if (funSuccess) {
    funSuccess();
  }
};
defineExpose({
  openToast,
  openModal,
});
</script>
<style lang="scss">
.el-dialog.cust-dialog {
  border-radius: 1rem;
  width: 100vw;
  padding: 0px;
  text-align: center;
  font-style: normal;
  background: none;
  box-shadow: none;

  .el-dialog__header {
    height: 0px;
    padding: 0px;
    margin: 0px;
    background: none;
  }

  .el-dialog__body {
    padding: 0px !important;
    margin: 0px !important;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;

    .cont {
      color: #ffffff;

      background: rgba(38, 38, 38, 0.84);
      padding: 1.6rem 1.2rem;
      border-radius: 0.6rem;
      min-width: 12rem;

      .el-icon {
        font-size: 3rem;
        margin: 0.4rem 0px 1rem;
      }

      .text {
        max-width: 24rem;
        font-weight: 500;
        font-size: 1.4rem;
        color: #ffffff;
        line-height: 2.2rem;
        text-align: center;
      }
    }

    .modal {
      width: 30rem;
      background: #ffffff;
      border-radius: 1.2rem;
      padding-bottom: 2rem;

      .text {
        padding: 3.5rem 2rem;
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 2.2rem;
      }

      .btns {
        display: flex;
        justify-content: center;

        .btn {
          width: 11rem;
          line-height: 4rem;
          font-size: 1.6rem;
          text-align: center;
          border-radius: 0.7rem;
          margin: 0px 0.7rem;
        }

        .btn1 {
          color: #262626;
          background: #f5f9ff;
        }
        .btn2 {
          color: #ffffff;
          background: #00a0e9;
        }
      }
    }
  }
}
</style>
